<ui:composition template="mainTemplate.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets" 
                >
    <ui:define name="title">Categories</ui:define>

    <ui:define name="content">
        <h:form>
            <h:dataTable value="#{categoryController.items}" var="item"
                         bgcolor="#fafafa" border="0" cellpadding="5" cellspacing="3"
                         first="0" width="50%" frame="border" styleClass="dataTable">
                <h:column>
                    <f:facet name="header">
                        Name
                    </f:facet>
                    <h:link outcome="pretty:browse">
                        #{item.name}
                        <f:param name="cat" value="#{item.id}"/>
                    </h:link>

                </h:column>
                <h:column>
                    <f:facet name="header">
                        Description
                    </f:facet>
                    <h:outputText value="#{item.description}"/>
                </h:column>
            </h:dataTable>
            <br/>
            <h:outputText value="#{categoryController.pagination.pageFirstItem + 1}..#{categoryController.pagination.pageLastItem + 1}/#{categoryController.pagination.itemsCount}"/>
            <br/>
            <h:commandLink action="#{categoryController.previous}" value="Previous #{categoryController.pagination.pageSize}" rendered="#{categoryController.pagination.hasPreviousPage}"/> 
            <h:commandLink action="#{categoryController.next}" value="Next #{categoryController.pagination.pageSize}" rendered="#{categoryController.pagination.hasNextPage}"/>
        </h:form>
    </ui:define>
</ui:composition>

